JavaScript Module Federation Plugin-arkitektur: Opbygning af et dynamisk plug-in-system

I nutidens komplekse landskab for webudvikling er det afgørende at bygge modulære, skalerbare og vedligeholdelige applikationer. En effektiv teknik til at opnå dette er gennem en plugin-arkitektur, hvor funktionalitet er opdelt i uafhængige, dynamisk indlæste moduler. JavaScript Module Federation, en funktion i Webpack 5, tilbyder en robust mekanisme til at implementere sådanne arkitekturer. Denne artikel dykker ned i detaljerne ved at bruge Module Federation til at bygge et dynamisk plug-in-system.

Hvad er Module Federation?

Module Federation giver JavaScript-applikationer mulighed for dynamisk at dele kode under kørsel. Det betyder, at et modul (et stykke kode) fra en applikation kan bruges direkte af en anden applikation uden at skulle genopbygges eller genudrulledes. Dette opnås ved at eksponere og forbruge moduler på tværs af forskellige builds og endda forskellige udrulninger.

Traditionelle metoder til kodedeling, såsom npm-pakker, kræver genopbygning og genudrulning af forbrugende applikationer, hver gang en delt afhængighed opdateres. Module Federation fjerner denne overhead, hvilket gør det ideelt til scenarier, hvor hyppige opdateringer og uafhængige udrulninger er påkrævet.

Hvorfor bruge Module Federation til plugin-arkitekturer?

Module Federation tilbyder flere fordele, når man bygger plugin-arkitekturer:

• Dynamisk modulindlæsning: Plugins kan indlæses og fjernes under kørsel, hvilket gør det muligt for applikationer at tilpasse sig ændrede krav uden at kræve en fuld genudrulning.
• Afkobling: Plugins udvikles og udrulles uafhængigt, hvilket reducerer afhængigheder mellem forskellige dele af applikationen.
• Skalerbarhed: Applikationen kan let udvides med nye plugins uden at påvirke eksisterende funktionalitet.
• Vedligeholdelighed: Plugins kan opdateres og vedligeholdes uafhængigt, hvilket reducerer risikoen for at introducere fejl i kerneapplikationen.
• Genbrug af kode: Plugins kan genbruges på tværs af flere applikationer, hvilket fremmer konsistens og reducerer udviklingsindsatsen.
• Versionering og tilbagerulning: Du kan administrere forskellige versioner af plugins og nemt rulle tilbage til tidligere versioner, hvis det er nødvendigt.

Kernekoncepter: Host- og Remote-containere

Module Federation kredser om to centrale koncepter:

• Host-container: Hovedapplikationen, der forbruger de fjerne moduler (plugins).
• Remote-container: Applikationen, der eksponerer moduler (plugins), som skal forbruges af hosten.

Host-containeren henter dynamisk remote entry-filen fra remote-containeren, som indeholder et manifest over eksponerede moduler. Hosten kan derefter tilgå og bruge disse moduler, som om de var en del af dens egen kodebase.

Implementering af et dynamisk plug-in-system med Module Federation: En trin-for-trin guide

Lad os gennemgå processen med at bygge et simpelt plug-in-system ved hjælp af Module Federation. Vi vil oprette en host-applikation og en remote plugin-applikation.

1. Opsætning af host-applikationen (Host-container)

Først skal du oprette en ny projektmappe og initialisere et nyt npm-projekt:

            mkdir host-app
cd host-app
npm init -y
            

              
                Copy
              
            
          

Installer Webpack og dets afhængigheder:

            npm install webpack webpack-cli webpack-dev-server html-webpack-plugin --save-dev
            

              
                Copy
              
            
          

Opret en webpack.config.js-fil i host-app-mappen med følgende konfiguration:

            const HtmlWebpackPlugin = require('html-webpack-plugin');
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
const path = require('path');

module.exports = {
  mode: 'development',
  devtool: 'source-map',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  devServer: {
    port: 3000,
    hot: true,
    static: {
      directory: path.join(__dirname, 'dist'),
    },
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react'],
          },
        },
      },
    ],
  },
  plugins: [
    new ModuleFederationPlugin({
      name: 'Host',
      remotes: {
        'plugin': 'Plugin@http://localhost:3001/remoteEntry.js',
      },
      shared: ['react', 'react-dom'],
    }),
    new HtmlWebpackPlugin({
      template: './public/index.html',
    }),
  ],
};

            

              
                Copy
              
            
          

Forklaring:

• name: Navnet på host-applikationen.
• remotes: Definerer de remote-containere, som hosten vil forbruge. I dette tilfælde forbruger den en remote-container ved navn plugin fra http://localhost:3001/remoteEntry.js. Syntaksen Plugin@ betyder, at remote-containerens ModuleFederationPlugin name er 'Plugin'.
• shared: Oplister de afhængigheder, der deles mellem host- og remote-containere. Dette forhindrer, at duplikerede kopier af disse afhængigheder indlæses. Brug af shared er afgørende for at undgå fejl og sikre korrekt plugin-funktionalitet.

Opret en src-mappe og tilføj en index.js-fil med følgende indhold:

            import React, { Suspense } from 'react';
import ReactDOM from 'react-dom/client';

const PluginComponent = React.lazy(() => import('plugin/PluginComponent'));

const App = () => {
  return (
    <div>
      <h1>Host-applikation</h1>
      <Suspense fallback={<div>Indlæser plugin...</div>}>
        <PluginComponent />
      </Suspense>
    </div>
  );
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

            

              
                Copy
              
            
          

Forklaring:

• Vi bruger React.lazy til dynamisk at importere PluginComponent fra plugin-remoten. Dette er afgørende for "lazy loading" af pluginnet og for at undgå forsinkelser ved den indledende indlæsning.
• Suspense-komponenten bruges til at håndtere indlæsningstilstanden, mens pluginnet hentes.

Opret en public-mappe og tilføj en index.html-fil med følgende indhold:

            <!DOCTYPE html>
<html>
<head>
  <title>Host-applikation</title>
</head>
<body>
  <div id="root"></div>
  <script src="./bundle.js"></script>
</body>
</html>
            

              
                Copy
              
            
          

Tilføj en Babel-konfigurationsfil .babelrc:

            {
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}
            

              
                Copy
              
            
          

Opdater din package.json med et start-script:

            {
  "name": "host-app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack serve --mode development",
    "build": "webpack --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.23.9",
    "@babel/preset-env": "^7.23.9",
    "@babel/preset-react": "^7.23.3",
    "babel-loader": "^9.1.3",
    "html-webpack-plugin": "^5.6.0",
    "webpack": "^5.90.3",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^4.15.1"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  }
}
            

              
                Copy
              
            
          

2. Opsætning af remote-applikationen (Plugin-container)

Opret en ny projektmappe til pluginnet:

            mkdir plugin-app
cd plugin-app
npm init -y
            

              
                Copy
              
            
          

Installer Webpack og dets afhængigheder:

            npm install webpack webpack-cli webpack-dev-server html-webpack-plugin --save-dev
            

              
                Copy
              
            
          

Opret en webpack.config.js-fil i plugin-app-mappen med følgende konfiguration:

            const HtmlWebpackPlugin = require('html-webpack-plugin');
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
const path = require('path');

module.exports = {
  mode: 'development',
  devtool: 'source-map',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  devServer: {
    port: 3001,
    hot: true,
    static: {
      directory: path.join(__dirname, 'dist'),
    },
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react'],
          },
        },
      },
    ],
  },
  plugins: [
    new ModuleFederationPlugin({
      name: 'Plugin',
      filename: 'remoteEntry.js',
      exposes: {
        './PluginComponent': './src/PluginComponent',
      },
      shared: ['react', 'react-dom'],
    }),
    new HtmlWebpackPlugin({
      template: './public/index.html',
    }),
  ],
};

            

              
                Copy
              
            
          

Forklaring:

• name: Navnet på remote-containeren (pluginnet). Dette skal matche det navn, der bruges i hostens remotes-konfiguration.
• filename: Navnet på den remote entry-fil, som hosten vil hente.
• exposes: Definerer de moduler, der eksponeres af remote-containeren. I dette tilfælde eksponerer vi PluginComponent-modulet. Nøglen './PluginComponent' bruges i hostens import-sætning (f.eks. import('plugin/PluginComponent')).
• shared: Ligesom hos hosten oplistes de delte afhængigheder. Det er afgørende, at de delte afhængigheder og deres versioner er kompatible mellem hosten og remoten.

Opret en src-mappe og tilføj en PluginComponent.jsx-fil med følgende indhold:

            import React from 'react';

const PluginComponent = () => {
  return (
    <div style={{border: '1px solid blue', padding: '10px'}}>
      <h2>Plugin-komponent</h2>
      <p>Dette er et dynamisk indlæst plugin!</p>
    </div>
  );
};

export default PluginComponent;

            

              
                Copy
              
            
          

Opret en index.js-fil i src-mappen for at eksportere PluginComponent:

            import PluginComponent from './PluginComponent';

export default PluginComponent;
            

              
                Copy
              
            
          

Opret en public-mappe og tilføj en index.html-fil med følgende indhold:

            <!DOCTYPE html>
<html>
<head>
  <title>Plugin-applikation</title>
</head>
<body>
  <div id="root"></div>
  <script src="./bundle.js"></script>
</body>
</html>
            

              
                Copy
              
            
          

Tilføj en Babel-konfigurationsfil .babelrc:

            {
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}
            

              
                Copy
              
            
          

Opdater din package.json med et start-script:

            {
  "name": "plugin-app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack serve --mode development",
    "build": "webpack --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.23.9",
    "@babel/preset-env": "^7.23.9",
    "@babel/preset-react": "^7.23.3",
    "babel-loader": "^9.1.3",
    "html-webpack-plugin": "^5.6.0",
    "webpack": "^5.90.3",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^4.15.1"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  }
}
            

              
                Copy
              
            
          

3. Kørsel af applikationerne

Start både host- og plugin-applikationerne ved at køre npm start i deres respektive mapper.

Naviger til http://localhost:3000 i din browser. Du skulle nu se host-applikationen med den dynamisk indlæste plugin-komponent.

Avancerede funktioner og overvejelser

Versionering og tilbagerulning

Module Federation understøtter versionering, hvilket giver dig mulighed for at administrere forskellige versioner af plugins. Du kan specificere versionsbegrænsninger i hostens remotes-konfiguration. For eksempel:

            remotes: {
  'plugin': 'Plugin@http://localhost:3001/remoteEntry.js@1.0.0',
}
            

              
                Copy
              
            
          

Dette fortæller hosten, at den skal bruge version 1.0.0 af pluginnet. Hvis en nyere version er tilgængelig, vil hosten fortsætte med at bruge den specificerede version, indtil den eksplicit opdateres. Implementering af robust versionering er afgørende for at forhindre "breaking changes" og sikre applikationens stabilitet.

Sikkerhedsovervejelser

Når du bruger Module Federation, er sikkerhed altafgørende. Overvej følgende:

• Autentificering og autorisation: Implementer korrekte autentificerings- og autorisationsmekanismer for at sikre, at kun autoriserede brugere kan tilgå og bruge plugins.
• Kodeintegritet: Verificer integriteten af de fjerne moduler for at forhindre, at ondsindet kode injiceres i applikationen. Overvej at bruge Content Security Policy (CSP) til at begrænse de kilder, hvorfra applikationen kan indlæse ressourcer.
• Afhængighedsstyring: Håndter omhyggeligt afhængighederne for både host- og remote-containere for at undgå sårbarheder. Opdater regelmæssigt afhængigheder til de nyeste versioner.
• Inputvalidering: Valider alle data modtaget fra fjerne moduler for at forhindre injektionsangreb.
• CORS (Cross-Origin Resource Sharing): Konfigurer CORS korrekt for at tillade host-applikationen at tilgå remote entry-filen fra plugin-applikationen.

Plugin-opdagelse og -styring

For mere komplekse plug-in-systemer kan du have brug for en mekanisme til at opdage og administrere plugins. Dette kan opnås gennem et plugin-register eller en opdagelsestjeneste. Et centralt register kan gemme oplysninger om tilgængelige plugins, herunder deres placering, version og afhængigheder. Host-applikationen kan derefter forespørge registret for at finde og indlæse de relevante plugins.

Overvej disse tilgange:

• Centraliseret konfiguration: Gem plugin-URL'er i en central konfigurationsfil (f.eks. en JSON-fil), som host-applikationen læser under kørsel. Dette giver dig mulighed for nemt at tilføje, fjerne eller opdatere plugins uden at skulle genudrulde host-applikationen.
• API-baseret opdagelse: Opret et API-endpoint, der returnerer en liste over tilgængelige plugins. Host-applikationen kan derefter hente denne liste og dynamisk indlæse plugins.
• Hændelsesdrevet arkitektur: Brug en event bus eller meddelelseskø til at underrette host-applikationen, når nye plugins er tilgængelige. Dette muliggør asynkron plugin-opdagelse og -indlæsning.

Dynamisk konfiguration og plugin-aktivering

At give brugerne mulighed for dynamisk at konfigurere og aktivere plugins er en kraftfuld funktion. Dette kræver en mekanisme til lagring og håndtering af plugin-konfigurationer. Du kan bruge en database, en konfigurationsfil eller en skybaseret konfigurationstjeneste til at gemme plugin-indstillinger. Host-applikationen kan derefter læse disse indstillinger under kørsel og aktivere plugins i overensstemmelse hermed. Overvej at tilbyde en brugergrænseflade til styring af plugin-konfigurationer.

Håndtering af asynkrone operationer og fejlhåndtering

Når man arbejder med dynamisk indlæste plugins, er det vigtigt at håndtere asynkrone operationer og fejl på en elegant måde. Brug async/await eller Promises til at styre asynkron kode. Implementer korrekt fejlhåndtering for at fange og logge eventuelle fejl, der opstår under indlæsning eller udførelse af plugins. Giv informative fejlmeddelelser til brugeren. Overvej at bruge en centraliseret fejl-logningstjeneste til at spore fejl på tværs af alle plugins.

Code Splitting og ydeevneoptimering

For at optimere ydeevnen skal du bruge "code splitting" til at opdele applikationen og plugins i mindre bidder. Dette giver browseren mulighed for kun at downloade den kode, der er nødvendig for en bestemt side eller funktion. Webpack har indbygget understøttelse af code splitting. Overvej at bruge "lazy loading" til kun at indlæse plugins, når de er nødvendige. Minificer og komprimer koden for at reducere filstørrelsen.

Test og kontinuerlig integration

Test dit plug-in-system grundigt for at sikre, at det fungerer korrekt. Skriv enhedstest, integrationstest og end-to-end-test. Brug et system til kontinuerlig integration (CI) til automatisk at køre tests, hver gang koden ændres. Implementer en pipeline for kontinuerlig levering (CD) for at automatisere udrulningen af applikationen og plugins.

Eksempler og use cases fra den virkelige verden

Module Federation bruges i en række virkelige applikationer, herunder:

• E-handelsplatforme: Dynamisk indlæsning af produktanbefalinger, betalingsgateways og leverandører af forsendelse. For eksempel kunne en global e-handelsplatform bruge Module Federation til at integrere forskellige betalingsudbydere baseret på kundens placering. I Nordamerika kunne den indlæse et plugin for Stripe, mens den i Europa kunne indlæse et plugin for PayPal eller Klarna.
• Content Management Systems (CMS): Giver brugere mulighed for at installere og aktivere plugins for at udvide funktionaliteten i CMS'et. Et CMS kunne give brugerne mulighed for at installere plugins til SEO-optimering, integration med sociale medier eller indholdsanalyse.
• Dashboards og analyseplatforme: Dynamisk indlæsning af forskellige widgets og visualiseringer. En global analyseplatform kunne indlæse plugins for forskellige datakilder, såsom Google Analytics, Adobe Analytics eller Salesforce.
• Microfrontend-arkitekturer: Opbygning af store webapplikationer som en samling af uafhængigt udrullelige microfrontends. En stor virksomhed kunne bruge Module Federation til at bygge sin webapplikation som en samling af microfrontends, hvor hver er ansvarlig for en specifik forretningsfunktion, såsom kontoadministration, produktkatalog eller ordrebehandling.
• Designsystemer: Deling af UI-komponenter og design-tokens på tværs af flere applikationer. En global organisation med flere brands kunne bruge Module Federation til at dele et fælles designsystem på tværs af alle sine applikationer, hvilket sikrer konsistens og reducerer udviklingsindsatsen.

Bedste praksis for opbygning af dynamiske plug-in-systemer med Module Federation

Her er nogle bedste praksis, du skal huske på, når du bygger dynamiske plug-in-systemer med Module Federation:

• Hold plugins små og fokuserede: Hvert plugin bør være ansvarlig for et specifikt stykke funktionalitet. Dette gør det lettere at vedligeholde og opdatere plugins.
• Definer klare plugin-grænseflader: Definer klare grænseflader for, hvordan plugins interagerer med host-applikationen. Dette sikrer, at plugins er kompatible med hosten og forhindrer "breaking changes".
• Brug semantisk versionering: Brug semantisk versionering til at administrere versionerne af dine plugins. Dette gør det lettere at spore ændringer og sikre kompatibilitet.
• Sørg for dokumentation: Sørg for klar og præcis dokumentation til dine plugins. Dette hjælper brugerne med at forstå, hvordan de installerer, konfigurerer og bruger plugins.
• Implementer bedste praksis for sikkerhed: Følg bedste praksis for sikkerhed for at beskytte din applikation og dine plugins mod sårbarheder.
• Overvåg plugin-ydeevne: Overvåg ydeevnen af dine plugins for at identificere eventuelle flaskehalse. Optimer koden for at forbedre ydeevnen.
• Automatiser udrulning: Automatiser udrulningen af din applikation og dine plugins. Dette reducerer risikoen for fejl og sikrer, at opdateringer udrulles hurtigt.
• Brug en ensartet kodestil: Håndhæv en ensartet kodestil på tværs af alle plugins. Dette gør koden lettere at læse og vedligeholde.
• Skriv enhedstest: Skriv enhedstest til dine plugins for at sikre, at de fungerer korrekt.
• Brug en linter: Brug en linter til automatisk at tjekke din kode for fejl.

Konklusion

JavaScript Module Federation tilbyder en kraftfuld og fleksibel mekanisme til at bygge dynamiske plug-in-systemer. Ved at udnytte Module Federation kan du skabe modulære, skalerbare og vedligeholdelige applikationer, der kan tilpasse sig skiftende krav. Ved at følge de bedste praksis, der er beskrevet i denne artikel, kan du bygge robuste og sikre plug-in-systemer, der opfylder din organisations behov.

Denne teknologi er især værdifuld i internationale sammenhænge, da den gør det muligt for virksomheder at skræddersy deres softwaretilbud til specifikke regioner eller kundesegmenter uden at skulle udrulle helt separate applikationer. Fra integration af lokale betalingsgateways til levering af regionsspecifikt indhold, muliggør Module Federation en mere personlig og effektiv brugeroplevelse globalt.